<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- mescroll -->
    <link rel="stylesheet" href="./assets/plugins/mescroll/mescroll.min.css">

    <!-- mui -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css">

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>

<body>
    <!-- 搜索 -->
    <div class="search">
        <div class="box">
            <div class="icon">
                <span class="glyphicon glyphicon-search"></span>
            </div>

            <input class="input" placeholder="请输入名字" />

            <button class="btn" size="mini" type="default">搜索</button>
        </div>
    </div>

    <div id="typeindex" class="mescroll">
        <ul class="mui-table-view">
        </ul>
    </div>

    <!-- 底部 -->
    <div class="actions">
        <a href="typeadd.html" class="mui-btn mui-btn-danger">添加分类</a>
    </div>
</body>

</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- mescroll -->
<script src="./assets/plugins/mescroll/mescroll.min.js"></script>

<!-- mui -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- 引入接口插件 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- 引入cookie -->
<script src="./assets/plugins/cookie.js"></script>
<!-- 引入校验用户插件 -->
<script src="./assets/plugins/helpers.js"></script>

<script>
    //实例化wow.js
    new WOW().init();

    let search = '',//搜索关键字
        business = cookie.get('business') ? JSON.parse(cookie.get('business')) : {};

    // 实例化插件
    let meScroll = new MeScroll('typeindex', {
        // 下拉刷新
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback, // 下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        // 上拉加载
        up: {
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop: {
                //配置回到顶部按钮
                duration: 600,
                src: './assets/plugins/mescroll/mescroll-totop.png', //默认滚动到1000px显示,可配置offset修改
                offset: 100,
                supportTap : true, //快速响应
            },
        },
    });

    // 下拉刷新回调函数
    async function downCallback()
    {
        // 当前页重置为1，自动调用上拉加载回调函数
        meScroll.resetUpScroll();
        
        // 原有数据清空
        $('#typeindex ul').empty();
    }

    // 上拉加载回调函数
    async function UpCallback(page)
    {
        let params = {
            page:page.num,// 当前页
            limit:page.size,// 每页显示多少条数据
            businessid:business.id,
            search
        }

        let result = await POST({
            url:'/card/type/index',
            params
        })
        
        if(result.code === 1)
        {
            let count = result.data ? result.data.count : 0;
            let list = result.data ? result.data.list : [];

            meScroll.endBySize(list.length,count);

            fetchList(list);

        }else{
            // 设置加载状态
            meScroll.endBySize(0,0);

            mui.toast(result.msg);

            return false;
        }
    }

    function fetchList(list = [])
    {
        if(list.length > 0)
        {
            let temp = '';

            for(let item of list)
            {
                temp = `
                    <li class="mui-table-view-cell">
                        ${item.name}
                        <button type="button" class="mui-btn mui-btn-success" onclick="onEdit(${item.id})">编辑</button>
                        <button type="button" class="mui-btn mui-btn-danger" onclick="onDel(${item.id},'${item.name}')">删除</button>
                    </li>
                `;

                $('#typeindex ul').append(temp);
            }
        }
    }

    function onEdit(typeid)
    {
        location.href = `typeedit.html?typeid=${typeid}`;
    }

    function onDel(typeid,typename)
    {
        console.log($(this));
        
        mui.confirm(
            '是否确认删除 ' + typename + ' 分类？',
            '删除分类',
            ['确认','取消'],
            async function(res)
            {
                if(res.index === 0)
                {
                    let params = {
                        businessid:business.id,
                        typeid
                    }

                    let result = await POST({
                        url:'/card/type/del',
                        params
                    })

                    if(result.code === 1)
                    {
                        mui.toast(result.msg);

                        downCallback();

                    }else{
                        mui.toast(result.msg);

                        return false;
                    }
                }
            }
        )
        
    }

    // 关键字
    $('button[type="default"]').click(function(){
        search = $.trim($('.input').val());

        downCallback();
    })
</script>